{% extends "base.html" %}

{% block title %}{% cache 60*5, 'wiki_title', link %}
    {% set wiki = wiki_for(link) %}
    {{ wiki.title }} - pygame wiki
{% endcache %}{% endblock title %}

{% block content %}
  {% cache 60*5, 'wiki_content', link %}
  {% set wiki = wiki_for(link) %}
  {% set content_rendered, toc_rendered = wiki.content_toc %}

    <div class="row">
      <div class="col-sm-3 wiki-toc-nav">
        <div id="toc-sidebar">
          {% if toc_rendered %}
            {{ toc_rendered | safe }}
          {% endif %}

          <nav class="wiki-nav">
            <p>Wiki tools</p>
            <a class="btn btn-default" href="{{ url_for('wiki.edit', link=link) }}" role="button">Edit</a>
            <a class="btn btn-default" href="{{ url_for('wiki.source', link=link) }}" role="button">Source</a>
            <a class="btn btn-default" href="{{ url_for('wiki.history', link=link) }}" role="button">History</a>
            {#- <a class="btn btn-default" href="#" role="button">Links</a> -#}
            {#- <a class="btn btn-default" href="#" role="button">Wiki Map</a> -#}
            <a class="btn btn-default" href="{{ url_for('wiki.recent') }}" role="button">Recent Changes</a>
          </nav>
        </div>
      </div>
      <div class="col-sm-9">
        <h1>{{ wiki.title }} &mdash; <a href="/wiki">wiki</a></h1>
        <div class="wiki-content">
          {{ content_rendered | safe }}
        </div>
      </div>
    </div>
  {% endcache %}
{% endblock %}


{% block body_attribs %}{{ super() }}{% endblock body_attribs %}

{%- block styles %}
  {{ super() }}
  <style>
    #toc-sidebar {max-width: 170px;}
    .header_link {visibility:hidden; padding-left:5px;}
    .wiki-heading:hover .header_link {visibility: visible;}
    @media(max-width:768px){
      #toc-sidebar {
        max-width: inherit;
      }
    }
    @media(min-width:780px){
      #toc-sidebar {
        position: fixed;
        left: 20px;
      }
    }
    .wiki-nav {
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-top: 20px;
      padding: 10px 15px;
    }

    .wiki-toc-nav .nav>li>a{
      display:block;padding:4px 4px;font-size:13px;font-weight:500;color:#eee
    }
    .wiki-toc-nav .nav>li>a:focus,.wiki-toc-nav .nav>li>a:hover{
      padding-left:3px;color:#32CD32;text-decoration:none;background-color:transparent;border-left:1px solid #32CD32
    }
    .wiki-toc-nav .nav>.active:focus>a,.wiki-toc-nav .nav>.active:hover>a,.wiki-toc-nav .nav>.active>a{
      padding-left:2px;font-weight:700;color:#32CD32;background-color:transparent;border-left:2px solid #32CD32
    }
    .wiki-toc-nav .nav .nav{
      padding-bottom:10px
    }
    .wiki-toc-nav .nav .nav>li>a{
      padding-top:1px;padding-bottom:1px;padding-left:14px;font-size:12px;font-weight:400
    }
    .wiki-toc-nav .nav .nav>li>a:focus,.wiki-toc-nav .nav .nav>li>a:hover{
      padding-left:13px
    }
    .wiki-toc-nav .nav .nav>.active:focus>a,.wiki-toc-nav .nav .nav>.active:hover>a,.wiki-toc-nav .nav .nav>.active>a{
      padding-left:12px;font-weight:500
    }
    .wiki-toc-nav .nav>.active>ul{
      display:block
    }
  </style>

{% endblock %}